<template>
    <div>
     <span>发货列表</span>
      <el-form :model="searchMap" class="demo-form-inline" ref="searchMap">
        <el-form-item>
        <el-table
        :data="searchMap.tableData"
        border
        style="width: 100%">
        <el-table-column
          label="订单编号"
          width="180"
          prop="id">
        </el-table-column>
        <el-table-column
          label="收货人"
          width="180"
          prop="receiverContact">
        </el-table-column>
        <el-table-column
          label="手机号码"
          width="180"
          prop="receiverMobile"
          >
        </el-table-column>
        <el-table-column
          label="收货地址"
          width="180"
          prop="receiverAddress">
        </el-table-column>
        <el-table-column
          label="配送方式"
          width="180"
          prop="logisticsId">
          <template slot-scope="scope">
          <el-form-item :prop="'tableData.' + scope.$index + '.logisticsId'">
          <el-select v-model="scope.row.logisticsId" placeholder="请选择物流公司" clearable>
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.companyName"
              :value="item.id">
            </el-option>
          </el-select>
          </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="物流单号"
          width="180"
          prop="shippingCode">
          <template slot-scope="scope" >
            <el-form-item :prop="'tableData.' + scope.$index + '.shippingCode'">
              <el-input  v-model="scope.row.shippingCode" size="small" :maxlength="30"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ShipButton()">发货</el-button>
          <el-button @click="prev()" >取消</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>
<script>
export default {
  data () {
    return {
      searchMap: {
        tableData: [] // 数据展示
      }, // 查询提交数据
      options: [], // 物流公司
      value: '',
      shippingMap: []
    }
  },
  methods: {
    async getfindAll () {
      for (let i = 0; i < this.$route.query.order.length; i++) {
        this.shippingMap.push(this.$route.query.order[i].id)
      }
      this.searchMap.orderStatus = 1
      const { data: res } = await this.$http.post(`/orders/order/findAllShipList?ids=${this.shippingMap}`, this.searchMap)
      const { data: logistics } = await this.$http.get('/orders/order/findLogistics')
      for (let i = 0; i < res.data.length; i++) {
        console.log(res.data[i])
        this.searchMap.tableData.push(res.data[i])
      }
      this.options = logistics.data
    },
    async ShipButton () {
      const { data: res } = await this.$http.post('/orders/order/updateOrderLogistics', this.searchMap.tableData)
      if (res.code === 200) {
        this.$message({
          type: 'success',
          message: '发货成功'
        })
        const vm = this
        vm.$router.push('/Order')
      }
    },
    // 返回
    prev () {
      this.$router.go(-1)
    }
  },
  // 钩子函数
  async created () {
    this.getfindAll()
  }
}
</script>
